<template>
<el-card class="box">
  <el-col :span="18" :offset="1">
        <el-form ref="userInfoForm" :label-position="labelPosition" label-width="120px" :model="formData" :size="formSize" :rules="rules">
          <el-form-item label="账号" prop="id">
            <el-input v-model="formData.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="头像" prop="photo">
            <el-upload class="floatLeft" ref="upload"
              :action="uploadAction"
              :on-change="handleChange"
              :limit="uploadLimit"
              :on-exceed="handleExceed"
              :auto-upload="false"
              :data="uploadData">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="邮箱/Email" prop="email">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcord">
            <el-input v-model="formData.idcord"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCord">
            <el-input v-model="formData.bankCord"></el-input>
          </el-form-item>
          <el-form-item label="银行开户行" prop="bankAddress">
            <el-input v-model="formData.bankAddress"></el-input>
          </el-form-item>
          <el-form-item label="银行开户人" prop="bankPerson">
            <el-input v-model="formData.bankPerson"></el-input>
          </el-form-item>
          <el-form-item label="支付宝账号">
            <el-input v-model="formData.alipayNo"></el-input>
          </el-form-item>
          <el-form-item label="微信账号">
            <el-input v-model="formData.wechatNo"></el-input>
          </el-form-item>
          <el-form-item label="业务员" prop="salesMan">
            <el-select style="width: 100%" v-model="formData.salesMan" placeholder="请选择">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="mini" class="floatLeft">
            <el-button type="primary" @click="formOnSubmit">提交</el-button>
          </el-form-item>
        </el-form>
    </el-col>     
</el-card>
</template>
<script>
    import router from '@/router/index';

    export default { 
        data () {
            return {
                labelPosition : this.global.labelPosition,
                formData : {
                    id : "",
                    name : "",
                    photo : "",
                    email : "",
                    idcord : "",
                    phone : "",
                    bankCord : "",
                    bankAddress : "",
                    bankPerson : "",
                    alipayNo : "",
                    wechatNo : "",
                    salesMan : ""
                },
                formSize : "mini",
                rules: {
                    id: [{required: true, message: '请输入账号', trigger: 'blur' }],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    email: [
                        {required: true, message: '请输入邮箱/Email', trigger: 'blur' },
                        {type: "email", message: '请输入正确的邮箱/Email', trigger: 'blur' }
                    ],
                    idcord: [
                        {required: true, message: '请选输入身份证号', trigger: 'blur' },
                    ],
                    phone: [{required: true, message: '请输入联系电话', trigger: 'blur' }],
                    bankCord: [{required: true, message: '请输入银行卡号', trigger: 'blur' }],
                    bankAddress: [{required: true, message: '请输银行开户行', trigger: 'blur' }],
                    bankPerson: [{required: true, message: '请输入银行开户人', trigger: 'blur' }],
                    salesMan: [{required: true, message: '请选择业务员', trigger: 'blur' }],
                },
                uploadAction : "http://localhost:9000/pms-manage-rest/goods/importTemplate",//文件上传的地址
                uploadLimit : 1,//限制只能传一个文件
                uploadData : {
                  flag : 1,
                  brandId : 1
                }
            }
        },
        methods: {
          formOnSubmit : function(){
                this.$refs["userInfoForm"].validate((valid) => {
                    if (valid) {
                        this.submitFormData();
                    } else {
                        return false;
                    }
                });
            },
            submitFormData : function(){//提交From表单数据
                console.info(this.formData);
            },
            submitUpload : function(){//提交上传的文件
                this.$refs.upload.submit();
            },
            handleChange : function(file, fileList) {//文件更改
                if(file.raw.type){
                    
                }
            },
            handleExceed : function(files, fileList){//文件超出个数限制时
                this.$message.warning(`当前限制选择 1 个文件，本次选择了无效，如果需要重新选择，请删除已经选择的文件！`);
            },
        },
        watch: {
            
        },
        created: function(){          
           
        },
        beforeDestroy:function(){
          
        }
    }
</script>